<template>
  <div class="time-slider-cell">
    <div v-if="itemData" class="cell-mn">
      <div class="clock">
        <el-icon><Clock /></el-icon>
        <div class="tag">{{ workMillise }}</div>
      </div>
      <div class="category">{{ category }}</div>
      <div class="remark">
        <div class="txt">{{ itemData?.remark }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import IProjectTypes from '../../interface/IProjectTypes'
import { computed } from 'vue'
import { Clock } from '@element-plus/icons-vue'
const props = defineProps({
  itemData: { type: Object as any, default: () => null },
  timelogCategory: {
    type: Array<IProjectTypes>,
    required: true,
    default: () => [{ dictCode: 0 }],
  },
})
const calculateMinutesDifference = (date1: Date, date2: Date) => {
  const diffInMilliseconds = date2.getTime() - date1.getTime()
  return Math.floor(diffInMilliseconds / (1000 * 60))
}
//
const workMillise = computed(() => {
  let res = 0
  if (props.itemData) {
    const startTime = new Date(props.itemData.startTime)
    const endTime = new Date(props.itemData.endTime)
    // console.log('endTime', endTime)
    res = calculateMinutesDifference(startTime, endTime)
  }
  return res > 0 ? res : 1
})
//
const category = computed(() => {
  let res = ''
  if (props.itemData) {
    if (props.itemData.timelogCategory == 0) {
      res = `${props.itemData.projectCode} - ${props.itemData.projectName}`
    } else {
      res = props.timelogCategory.find((e) => e.dictValue == props.itemData.timelogCategory)?.dictLabel || ''
    }
  }
  return res
})
</script>
<style lang="scss" scoped>
.time-slider-cell {
  // pointer-events: none;
  display: flex;
  .cell-mn {
    display: flex;
    align-items: center;
    flex: 1;
    pointer-events: none;
    user-select: none;
    .clock {
      display: flex;
      align-items: center;
      .tag {
        margin-left: 2px;
      }
    }
    .category {
      margin-left: 10px;
      font-weight: bold;
    }
    .remark {
      flex: 1;
      overflow: hidden;
      position: relative;
      margin: 0 10px;
      height: 100%;
      .txt {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
